<template>
    <div>
        <Row class-name="row">
            <Col span="5">
                <label style="font-weight: bold">{{label}}：</label>
            </Col>
            <Col span="12">
                <Input v-model="text" :placeholder="placeholderText" clearable style="width: 200px"/>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: 'InputText',
        props: {
            label: {
                type: String,
                default: '输入内容'
            },
            placeholder: {
                type: String,
                default: ''
            },
            value: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                text: '',
            };
        },
        computed: {
            placeholderText() {
                if (this.placeholder !== null && this.placeholder !== undefined && this.placeholder !== '') {
                    return this.placeholder;
                }
                return '请输入' + this.label;
            }
        },
        watch: {
            value(newVal) {
                this.text = newVal;
            },
            text(newVal) {
                this.$emit('input', newVal);
            }
        },
        mounted() {
            this.text = this.value;
        }
    };
</script>

<style scoped>
    .row {
        line-height: 28px;
        height: 28px;
    }
</style>
